<!DOCTYPE html>
<html>
<head>
    <% include ../../web/jingpeng/meta.html %>
    <% include global/top-css.html %>
    <title></title>
</head>
<body>
        
    <% include ../../web/jingpeng/header.html %>
    <section class="row">
        <img class="wauto" src="/static/web/jingpeng/img/news.jpg" alt="">
    </section>
        <div class="row wrap-content  page-c mt-30">
            <% include global/nav-aside.html %>
            
            <div class="flex pd-10 flex">
                 <% include global/user-info.html %>
                 <h3 class="f-16 c-333 mt-30 mb-15 lh-30 h3"><span class="pl-3 pr-3">消息中心</span></h3>
               <ul id="msg">
                    <li v-for="item in list" class="border-b pos-r mb-12 pb-4">
                        <div class="row">
                            <input name="id" class="checkbox pos-r t-4 mr-6" :value="item.id" v-model="checkbox" type="checkbox">
                            <time class="ml-5 f-14 c-999">{{item.date}}</time>
                        </div>
                        <div class="row mt-6 f-14 mb-8">
                            <div class="col-bd pl-26"><a class="c-666"  :class="{'c-b2b2b2':item.status==1}" :href="'/user/msg/'+item.id">{{item.title}}</a></div>
                        </div>    
                    </li>
               </ul>
                <div>
                    <span class="mr-30">
                    <input name="selectAll" v-model="checked" @click="checkedAll" class="checkbox pos-r t-1 mr-6" type="checkbox">
                    <span class="pos-r t-0 f-14 c-666">全选</span>
                    </span>
                    <span @click="markRead" class="btn-cz mr-5">已读</span>
                    <span @click="del" class="btn-cz">删除</span>
                </div>
                <!-- {{checkbox}} -->
                <div class="page text-c">
                   <ul class="pagination" id="page2"></ul>
                </div>
            </div>
        </div>
        
         <% include global/footer.html %>
         <% include global/footer-js.html %>
         <script>  
            var vm = new Vue({
                el:'.wrap-content',
                data:{
                    totalPage:0,
                    currentPage:1,
                    list:[],//渲染页面的列表数据
                    checked:false, //全选
                    checkbox:[] //选择的数据
                },
                methods:{
                    checkedAll:function(){
                        var _this = this;
                        if(this.checked){
                            _this.checkbox = [];
                        }else{
                            _this.checkbox = [];
                            _this.list.forEach(function(item) {
                              _this.checkbox.push(item.id);
                            });
                        }
                    }
                    ,
                    api:function(){
                        var _this = this;
                        $.ajax({
                            url: "/user/msg/list",
                            data:{'page':_this.currentPage},
                            cache:false,
                            contentType:false,
                            type: "get",
                            dataType:'json',
                            success:function(data){
                                _this.totalPage = data.pageTotal;
                                _this.checked = false;
                                //翻页之后要清空数据 和清空选择数据
                                _this.list = data.data;
                                _this.checkbox = [];

                                _this.page();
                            }
                        });
                    },
                    page:function(){
                        var _this = this;
                        if(_this.currentPage<=0){
                            _this.currentPage = 1;
                        }
                        if(_this.currentPage>_this.totalPage){
                            _this.currentPage = _this.totalPage;
                        }
                        Page({
                            num:parseInt(_this.totalPage),	//页码数
                            startnum:_this.currentPage,				//指定页码
                            elem:$('#page2'),		//指定的元素
                            callback:function(n){	//回调函数
                                _this.currentPage = n;
                                _this.api();
                            }
                        });
                    },
                    del:function(){

                        var _this = this;
                        $.ajax({
                            type: 'POST',
                            url: "/user/msg/del",
                            data: {"id":_this.checkbox,page:$m.getParams('page')},
                            dataType: 'json',
                            success: function(){
                                _this.$message('删除成功！')
                                vm.api();
                            }
                        });

                       
                    },
                    markRead:function(){
                      
                        var _this = this;
                     
                        $.ajax({
                            type: 'POST',
                            url: "/user/msg/markRead",
                            data: {"id":_this.checkbox},
                            dataType: 'json',
                            success: function(){
                                _this.$message('已读成功！')
                                vm.api();
                            }
                        });
                    }
                },
                watch:{
                    checkbox:{
                        handler:function(val,oldval){
                            if(this.checkbox.length === this.list.length){
                                this.checked = true;
                            }else{
                                this.checked = false;
                            }
                        },
                        deep:true
                    },
                    list:{
                        handler:function(val,oldval){
                        },
                        deep:true
                    }
                },
                created:function(){
                    this.api();
                    this.page();
                },
                mounted:function(){
                    
                },
                updated:function(){
                    
                }
            });
                        
    </script>
</body>
</html>